/**
 * 仪表盘布局样式
 */

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

// 统计卡片
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: white;
  border-radius: var(--border-radius, 0.375rem);
  box-shadow: var(--box-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  padding: 1.5rem;
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  
  &.patients {
    background-color: #e7eaff;
    color: var(--color-primary);
  }
  
  &.appointments {
    background-color: #fff3bf;
    color: #fab005;
  }
  
  &.diagnosis {
    background-color: #ebfbee;
    color: var(--color-secondary, #34a853);
  }
  
  &.records {
    background-color: #e3fafc;
    color: #15aabf;
  }
}

.stat-data {
  h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-600, #80868b);
    margin-bottom: 0.5rem;
  }
  
  .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  
  .stat-change {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    
    span {
      color: var(--color-gray-600, #80868b);
      margin-left: 0.25rem;
    }
    
    &.increase {
      color: var(--color-secondary, #34a853);
    }
    
    &.decrease {
      color: var(--color-accent, #ea4335);
    }
  }
}

// 图表和表格区域
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 1.5rem;
}

.dashboard-card {
  background-color: white;
  border-radius: var(--border-radius, 0.375rem);
  box-shadow: var(--box-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
  margin-bottom: 1.5rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-gray-200, #e8eaed);
  
  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
  }
  
  .card-actions {
    display: flex;
    align-items: center;
    
    select {
      padding: 0.375rem 0.75rem;
      border: 1px solid var(--color-gray-300, #dadce0);
      border-radius: 0.25rem;
      font-size: 0.875rem;
    }
    
    .card-action-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-gray-600, #80868b);
      padding: 0.25rem;
      
      &:hover {
        color: var(--color-primary);
      }
    }
  }
}

.card-body {
  padding: 1.5rem;
}

.chart-container {
  height: 300px;
}

// 响应式调整
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
} 